<style>
	page{
		background-color: #ededed;
	}
	.inpbox{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;
		background-color: fff;
	}
	.inpbox input{
		background-color: #eee;
		width: 80%;
		height: 80upx;
	}
	.send{
		padding: 5upx;
		color: #fff;
		background-color: #4CD964;
		border-radius: 10upx;
	}
	.box{
		/* height: 100upx; */
		padding-bottom: 80upx;
	}
	
	.room_bar {
		width: 100%;
		height: auto;
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		transform: translateZ(1000px);
	}
	
	.other_func {
		width: 100%;
		height: 60upx;
		display: flex;
	}
	.other_func_X{
		height: 128upx;
	}
	
	.other_func image {
		width: 42upx;
		height: 40upx;
	}
	
	.open_emoji,
	.send_image,
	.open_camera,
	.v-record {
		width: 48upx;
		height: 48upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 48upx;
	}
	
	
	.v-record .icon-record {
		width: 18upx;
		height: 40upx;
	}
	.v-record{
		margin-left: 48upx;
	}
	.open_camera, .send_image{
		margin-left: 64upx;
	}
	
	
.text-input {
	width: 100%;
	height: 100upx;
	padding: 0;
	display: flex;
	align-items: center;
	background-color: #f6f6f6;
}
.text-input input{
	background-color: #fff;
}

.news {
	width: 66%;
	height: 74upx;
	font-size: 28upx;
	padding: 0 32upx;
	line-height: 74upx;
	border-radius: 10upx;
	margin-left: 21upx;
}
.sendbtn{
	flex:1;
	height: 74upx;
	line-height: 74upx;
	border-radius: 10upx;
	background-color: #09c063;
	color: #fff;
	font-size: 26upx;
	text-align: center;
	margin: 0 20upx;
}
.nosendbtn{
	background-color: #d3f1e2;
}

.send_btn {
	width: 80upx;
	height: 60upx;
	line-height: 60upx;
	font-size: 17px;
	color: #000;
	padding: 0;
	display: inline-block;
	float: right;
	margin: 8upx 16upx auto auto;
	background-color: #fff;
}

.f-row{
	height:100upx;
	display:flex;
	align-items:center;
}
/*.chat-bg{
	position:fixed;
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 50px;
}*/
/* .wrap{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: scroll;
} */
.scroll_view,
.scroll_view_change {
	/*width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 150upx;*/
	margin-bottom: 174upx;
	background-color: #FAFAFA;
}

.scroll_view_X,
.scroll_view_change_X{
	margin-bottom: 244upx;
}

.scroll_view_change {
	/*bottom: 440upx;*/
	margin-bottom: 590upx;
}

.message {
	width: 92%;
	height: auto;
	padding: 0 30upx;
	position: relative;

}

.time {
	margin: 14upx 0;
	text-align: center;
}

.time .time-text {
	display: inline-block;
	padding: 6upx 20upx 0 20upx;
	font-size: 24upx;
	color: #fff;
	line-height: 28upx;
	border-radius: 4upx;
	background-color: #dcdcdc;
}

.user .user-text {
	margin: auto 100upx 8upx;
	font-size: 20upx;
	color: #dcdcdc;
	display: block;
}

.avatar {
	width: 72upx;
	height: 72upx;
	margin: 0 20upx 0 0;
	border-radius: 6upx;
	float: left;
}

.msg {
	display: inline-block;
	padding: 8upx 20upx 8upx 20upx;
	max-width: calc(80% - 80upx);
	min-height: 40upx; 
	font-size: 24upx;
	/*overflow: hidden;*/
	text-align: left;
	word-break: break-all;
	background-color: #fff;
	border-radius: 26upx;
	position: relative;
	margin-top: 24upx;
}

.msg .msg_poprightarrow {
	position: absolute;
	right: -10upx;
	height: 18upx;
	width: 18upx;
	/* margin-top: -10upx; */
}

.msg .msg_popleftarrow{
	position:absolute;
	left: -14upx;
	height: 18upx;
	width: 18upx;
	/* margin-top: -10upx; */
}

.msg .msg-text {
	line-height: 40upx;
	font-size: 32upx;
	margin: 0;
}

/*.msg:before {
	content: " ";
	position: absolute;
	top: 9px;
	right: 100%;
	border: 6px solid transparent;
	border-right-color: #EDEDED;
}*/

.self {
	text-align: right;
}

.self .avatar {
	float: right;
	margin: 0 0 0 20upx;
}

.user {
	position: relative;
	bottom: -30upx;
}

.self .msg {
	background-color: #0873DE;
	color: #fff;
}

.self .msg:before {
	right: inherit;
	left: 100%;
	border-right-color: transparent;
	border-left-color: #b2e281;
}

.template {
	display: inline;
}
.err{
	width: 32upx;
	height: 32upx;
	position: absolute;
	left: -40upx;
}
.hide{
	display: none;
}
.show{
	display: block;
}
.wrap{
	background: #eee;
	padding-bottom:130upx;
}
.menuList{
	overflow: hidden;
	padding: 14upx 0;
	padding-bottom: 26upx;
	background-color: #f6f6f6;
}
.menuinner{
	float: left;
	display: flex;
	align-items: center;
}
.Emoji{
	width: 55upx;
	height: 55upx;
	margin: 0 12upx;
}
.picbtn{
	width: 55upx;
	height: 47upx;
	margin: 0 12upx;
}
.camerabtn{
	width: 55upx;
	height: 47upx;
	margin: 0 12upx;
}
.audiobtn{
	width: 32upx;
	height: 47upx;
	margin: 0 12upx;
}
.emojiitem{
	width: 65upx;
	height: 65upx;
	margin: 16upx;
}
.emojibox{
	padding: 0 5%;
}
@keyframes scrollUp{
	from
	{bottom:-375upx ;}
	to
	{bottom:0;}
}
@keyframes scrollDown{
	from
	{bottom:0;}
	to
	{bottom:-375upx ;}
}
.scrollview{
	position: relative;
	height: 372upx;
	background-color: #ededed;
	padding-bottom: 56upx;
}
.scrollup{
	animation: scrollUp .3s linear;
}
.scrolldown{
	animation: scrollDown .3s linear;
}
.emojidel{
	position: fixed;
	background: #fff;
	right: 16upx;
	bottom: 8upx;
	padding: 5upx 18upx;
	background-color: #fff;
	border-bottom-left-radius: 40upx;
	border-top-left-radius: 40upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.emojidel image{
	width: 60upx;
	height: 60upx;
}
.msginnerbox{
	/* display: inline; */
	float: left;
}
.emojiitem2{
	width: 50upx;
	height: 50upx;
	margin-top: -9upx;
}
.imgitem{
	width: 369upx;
	height: 230upx;
}



.modal-record .modal-body {
	position: absolute;
	width: 480upx;
	height: 440upx;
	left: 50%;
	margin-left: -240upx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	box-shadow: 0 0 32upx rgba(0, 0, 0, 0.15);
	/* position: fixed; */
	/* bottom: 480upx; */
	/* left: 50%; */
	/* margin-left: -240upx; */
}
.modal {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background: rgba(0,0,0,0.4); */
}
.recordcover{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.4);
}

.modal-record .desc {
	color: rgb(112, 126, 137);
	font-size: 13px;
	margin-bottom: 40upx;
	display: block;
	height: 30upx;
	width: 100%;
	text-align: center;
}

.modal-record .dot {
	width: 128upx;
	height: 128upx;
	border-radius: 50%;
	background-color: #0873DE;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dot image {
	width: 44upx;
	height: 64upx;
}

.sound-waves {
  width: 100%;
  box-sizing: border-box;
  padding-left:10%;
  margin-top: 80upx;
  height: 80upx;
  text-align: center;
}
 
.sound-waves view {
  transition: all 0.5s;
  width: 1%;
  margin-left: 1.5%;
  margin-right: 1.5%;
  height: 160upx;
  background-color: #aaa;
  float: left;
}
</style>
<template>
<view>
	<view
	scroll-y="true"
	class="wrap"
	upper-threshold='-50'
    >
	<view class="message" v-for="(item,index) in txtlist" :key="item">
		<view :class="item.self?'self':'main'">
			<view class="user">
				<span class="user-text">来自对方 2020.12.31</span>
			</view>
			<image class="avatar" src="/static/images/theme@2x.png"/>
			<view class="msg">
				<image v-if="!item.self" src="/static/images/popleftarrow@2x.png" class="msg_popleftarrow"/>
				<image v-if="item.self" src="/static/images/poprightarrow@2x.png" class="msg_poprightarrow"/>
				<span v-if="item.type == 'txt' || item.type == 'emoji'" class="msginnerbox" v-for="(valitem,valindex) in item.value" :key="valindex">
				<view v-if="valitem.type == 'txt'">{{valitem.data}}</view>
				<image v-if="valitem.type == 'emoji'" class="emojiitem2" :src="valitem.data" ></image>
				</span>
				<image v-if="item.type == 'img'" class="imgitem" :src="item.value" mode="aspectFill" @click="previewimg(item.id)"></image>
				<audio-msg
					v-if="item.type == 'audio'"
					:msg="item"></audio-msg>
			</view>
			</view>
		</view>
	</view>
	<view class="room_bar">
		<view class="text-input">
				<input
					class="f news"
					type="text"
					v-model="value"
					cursor-spacing="65"
					confirm-type="send"
					@click="inpfocus"
					@focus="inpfocus"
					@blur="inpblur"
					placeholder-style="color:#CFCFCF; padding-left:5px;"
					 />
					 <view :class="[{nosendbtn:!cansend},'sendbtn']" @click="send">发送</view>
		</view>
		<view class="menuList">
			<view class="menuinner">
				<image class="Emoji" src="/static/Emoji.png" @click="showemojibtn"></image>
				<image class="picbtn" src="/static/images/pic.png" @click="sendImage"></image>
				<image class="camerabtn" src="/static/images/Camera.png" @click="openCamera"></image>
				<image class="camerabtn" src="/static/images/file.png" @click="sendfile"></image>
				<image class="audiobtn" src="/static/images/audioicon.png" @click="openrecordbox"></image>
			</view>
		</view>
		<scroll-view v-if="showemoji" :class="[{scrollup:showemoji,scrolldown:!showemoji},'scrollview']" scroll-y="true">
			<view class="emojibox">
				<image 
				class="emojiitem" 
				:src="emojiList.path+emojitem" 
				v-for="(emojitem,index) in emojiList.map"
				:key="index"
				@click="tapemoji(emojitem)"
				></image>
				<view class="emojidel" @click="delvalue" @longpress="delallvalue">
					<image src="/static/images/faces/btn_del.png"></image>
				</view>
			</view>
		</scroll-view>	
	</view>
	
			
	<view v-if="showrecordbox" class="modal modal-record">
		<view class="recordcover" @click="hiderecordbox"></view>
		<view class="modal-body">
			<view class='sound-waves'>
				<view v-for="item in radomheight" :key="item" :style="{height:item+'rpx;',marginTop:-item/2+'rpx'}"></view>
				<view style='clear:both;width:0;height:0;'></view>
			</view>
			<text class="desc">{{ RecordDesc[recordStatus] }}</text>
			<button class="dot" @touchstart="handleRecording" @touchmove="handleRecordingMove" @touchend="handleRecordingCancel"
			 @touchcancel="handleRecordingCancel">
				<image class="icon-mic" src="/static/images/send.png" />
			</button>
		</view>
	</view>
</view>
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	let disp = require("../../utils/broadcast");
	let getMsgData = require("../../utils/getMsgData")
	let msgStorage = require("../../utils/msgstorage")
	let msgType = require('../../utils/msgtype');
	let RECORD_CONST = require("../../utils/record_status");
	let RecordStatus = RECORD_CONST.RecordStatus;
	let RecordDesc = RECORD_CONST.RecordDesc;
	const InitHeight = [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50];
	let RunAnimation = false;
	
	import audioMsg from "@/components/audio/audio.vue";
export default{
	components:{
		audioMsg
	},
	data() {
		return {
			value:'',
			winheight:'',
			boxheight:'',
			boxmt:'', 
			scrolltop:'',
			emojiList:WebIM.Emoji,
			indicatorDots:true,
			cansend:false,
			showemoji:false,
			from:'',
			to:'',
			changedTouches: null,
			recordStatus: RecordStatus.HIDE, 
			RecordStatus,
			RecordDesc,		// 模板中有引用
			radomheight: InitHeight,
			recorderManager: uni.getRecorderManager(),
			recordClicked: false,
			showrecordbox:false,
		}
	},
	onLoad(){
		this.toscroll()
		this.from = getApp().globalData.username;
		if(this.from == 'fishha'){
			this.to = 'fishhu'
		}else if(this.from == 'fishhu'){
			this.to = 'fishha'
		}
		
		
		
	},
	computed:{
		txtlist(){
			return this.$store.state.msgList 
		},
		imgarr(){
			let imgarr = [];
			this.txtlist.forEach((item,index)=>{
				if(item.type == 'img'){
					imgarr.push(item.value)
				}
			})
			return imgarr
		},
		imgarrindex(){
			let imgarrindex = [];
			this.txtlist.forEach((item,index)=>{
				if(item.type == 'img'){
					imgarrindex.push(item.id)
				}
			})
			return imgarrindex
		}
	},
	watch:{
		value:{
			handler(){
				if(this.value){
					this.cansend = true;
				}else{
					this.cansend = false;
				}
			}
		}
	},
	methods:{
		toggleWithoutAction(e){
			// 阻止 tap 冒泡
		},
		toggleRecordModal(){
			this.recordStatus = this.recordStatus == RecordStatus.HIDE ? RecordStatus.SHOW : RecordStatus.HIDE;
			this.radomheight = InitHeight;
		},
		focus(){
			this.triggerEvent("inputFocused", null, { bubbles: true });
		},
		blur(){
			this.triggerEvent("inputBlured", null, { bubbles: true });
		},
		scrollbt(){
			var _this = this;
			uni.getSystemInfo({
					success: function (res) {
						_this.winheight = res.windowHeight;
						let info = uni.createSelectorQuery().select(".box");
				　　　  　info.boundingClientRect(function(data) { //data - 各种参数
				　　　  　console.log(data.height)  // 获取元素宽度
								_this.scrolltop =data.height
								uni.pageScrollTo({
									duration:0,
									scrollTop:data.height
								})
				　　    }).exec()
					}
				});
		},
		inpfocus(e){
			let keyheight = e.detail.height 
			this.boxheight = this.winheight - keyheight;
			this.boxmt = keyheight+'px'
			this.showemoji = false;
			// this.scrollbt()
			this.toscroll()
		},
		inpblur(){
			this.boxheight = this.winheight;
			this.boxmt = 0+'px'
		},
		send(){
			if(this.cansend){
				let obj = {
					self:true,
					msg:this.value
				}
				let id = WebIM.conn.getUniqueId();
				let msg = new WebIM.message('txt', id);
				msg.set({
				    msg: this.value,
				    from: this.from,
				    to: this.to,
				    roomType: false,
					ext:{
						url:'www.baidu.com'
					},
				    chatType: 'singleChat',
				    success(id, serverMsgId){
					disp.fire('em.chat.sendSuccess', id, this.value);
					}
				});
				 
				WebIM.conn.send(msg.body);
				this.toscroll()

				// this.scrollbt()
				let msgData = {
					self:true,
					type:'txt',
					value:this.value
				}
				this.$store.dispatch('pushMsg',getMsgData(msgData,'txt'))
				console.log(this.txtlist)
				// msgStorage.saveMsg(msg,msgType.TEXT,null)
				// console.log(uni.getStorageSync(uni.getStorageSync("myUsername")))
				this.value = ''
				let options = {
				    queue: "fishhu",
				    isGroup: false,
				    count: 10,
				    success: function(res){
						console.log(res)
					},
				    fail: function(){}
				}
				WebIM.conn.fetchHistoryMessages(options)
			}
		},
		delvalue(){
			if(this.value){
				var valarr = this.value.split('');
				valarr.pop();
				this.value = valarr.join('')
			}
		},
		delallvalue(){
			this.value = ''
		},
		showemojibtn(){
			if(this.showemoji){
				this.showemoji = false;
			}else{
				this.showemoji = true;
			}
		}, 
		tapemoji(emoji){
			let emojival;
			for(var key in this.emojiList.map){
				if(this.emojiList.map[key] == emoji){
					emojival = key
				}
				// console.log(key); 
			}
			if(this.value){
				this.value = this.value+emojival
			}else{
				this.value = emojival
			}
		},
		openCamera(){
			var me = this;
			uni.chooseImage({
				count: 1,
				sizeType: ["original", "compressed"],
				sourceType: ["camera"],
				success(res){
					res.tempFilePaths.forEach((item,index)=>{
						me.upLoadImage(item);
					})
				}
			});
		},
		sendImage(){
			var me = this;
			uni.chooseImage({
				sizeType: ["original", "compressed"],
				sourceType: ["album"],
				success(res){
					console.log(res.tempFilePaths)
					res.tempFilePaths.forEach((item,index)=>{
						me.upLoadImage(item);
					})
					// me.upLoadImage(res.tempFilePaths[0]);
				},
			});
		},
		upLoadImage(url){
			var me = this;
			// var tempFilePaths = res.tempFilePaths;
			var token = WebIM.conn.context.accessToken
			uni.getImageInfo({
				src: url,
				success(res){
					var allowType = {
						jpg: true,
						gif: true,
						png: true,
						bmp: true
					};
					var str =WebIM.config.appkey.split("#");
					console.log(str)
					var width = res.width;
					var height = res.height;
					var index = res.path.lastIndexOf(".");
					var filetype = (~index && res.path.slice(index + 1)) || "";
					if(filetype.toLowerCase() in allowType){
						uni.uploadFile({
							url: "https://a2.easemob.com/" + str[0] + "/" + str[1] + "/chatfiles",
							filePath: url,
							name: "file",
							header: {
								"Content-Type": "multipart/form-data",
								Authorization: "Bearer " + token
							},
							success(res){
								var data = res.data;
								var dataObj = JSON.parse(data);
								console.log(dataObj)
								var id = WebIM.conn.getUniqueId();		// 生成本地消息 id
								var msg = new WebIM.message(msgType.IMAGE, id);
								var file = {
									type: msgType.IMAGE,
									size: {
										width: width,
										height: height
									},
									url: dataObj.uri + "/" + dataObj.entities[0].uuid,
									filetype: filetype,
									filename: url
								};
								msg.set({
									apiUrl: WebIM.config.apiURL,
									body: file,
									from: me.from,
									to: me.to,
									roomType: false,
									chatType: msgType.chatType.SINGLE_CHAT,
									success: function (argument) {
										disp.fire('em.chat.sendSuccess', id);
									}
								});
								// if(me.chatType == msgType.chatType.CHAT_ROOM){
								// 	msg.setGroup("groupchat");
								// }
								let obj = {
									id:msg.id,
									self:true,
									type:msgType.IMAGE,
									value:getMsgData(msg,msgType.IMAGE)
								}
								WebIM.conn.send(msg.body);
								// console.log(getMsgData(msg,msgType.IMAGE))
								me.$store.dispatch('pushMsg',obj)
								console.log(me.$store.state.msgList)
							}
						});
					}
				}
			});
		},
		toscroll(){
			var _this = this;
			uni.getSystemInfo({
					success: function (res) {
						_this.winheight = res.windowHeight;
						let info = uni.createSelectorQuery().select(".wrap");
						let info2 =uni.createSelectorQuery().select(".room_bar"); 
				　　　  　info.boundingClientRect(function(data) { //data - 各种参数
									info2.boundingClientRect(function(data2) { //data - 各种参数
							　　　  　console.log(data.height)  // 获取元素宽度
											uni.pageScrollTo({
												scrollTop: data.height+data2.height,
												duration: 300,
												success: function(){console.log('滚动成功')},
												fail: function(){console.log('滚动失败')}
											})
							　　    }).exec()
				　　    }).exec()
					}
				});
		},
		previewimg(id){
			console.log(this.imgarr)
			console.log(id)
			let index = this.imgarrindex.findIndex((item)=>item == id)
			console.log(this.imgarrindex)
			console.log(index)
			uni.previewImage({
				urls: this.imgarr,		// 需要预览的图片 http 链接列表
				current:index
			});
		},
		sendfile(){
			uni.navigateTo({
				url:'/pages/webview/webview'
			})
			return
			var str = WebIM.config.appkey.split("#");
			    var me = this;
			    var token = WebIM.conn.context.accessToken
			    uni.uploadFile({
			        url: "https://a1.easemob.com/" + str[0] + "/" + str[1] + "/chatfiles",
			        filePath: tempFilePath,
			        name: "file",
			        header: {
			            "Content-Type": "multipart/form-data",
			            Authorization: "Bearer " + token
			        },
			        success(res){
			            var id = WebIM.conn.getUniqueId();
			            var msg = new WebIM.message(msgType.AUDIO, id);
			            var dataObj = JSON.parse(res.data);
			            msg.set({
			                apiUrl: WebIM.config.apiURL,
			                accessToken: token,
			                body: {
			                    type: msgType.FILE,
			                    url: dataObj.uri + "/" + dataObj.entities[0].uuid,
			                    filetype: "",
			                    filename: tempFilePath,
			                    accessToken: token,
			                    length: ""
			                },
			                from: me.from,
			                to: me.to,
			                roomType: false,
			                chatType: me.data.chatType,
			                success: function (argument) {
			                    disp.fire('em.chat.sendSuccess', id);
			                }
			           });
			           // if(me.isGroupChat()){
			           //     msg.setGroup("groupchat");
			           // }
					   console.log('发送文件')
					   console.log(msg)
			           msg.body.length = "";
			           WebIM.conn.send(msg.body);
			       }
			   });
		},
		handleRecording(e){
			let me = this;
			this.recordClicked = true;
		    setTimeout(() => {
		      	if (this.recordClicked == true) {
		        	executeRecord()
		      	}
		    }, 350)
		    function executeRecord(){
				// #ifdef APP-PLUS
				startRecord()
				return;
				// #endif
				
			    uni.getSetting({ 
			      	success: (res) => {
				        let recordAuth = res.authSetting['scope.record']
				        if (recordAuth == false) { //已申请过授权，但是用户拒绝
				          	uni.openSetting({
					            success: function (res) {
					              let recordAuth = res.authSetting['scope.record']
					              if (recordAuth == true) {
					                uni.showToast({
							        	title: "授权成功",
							        	icon: "success"
							        })
					              } else {
					                uni.showToast({
							        	title: "请授权录音",
							        	icon: "none"
							        })
					              }
								  me.isLongPress = false;
					            }
				          	})
				        } else if (recordAuth == true) { // 用户已经同意授权
				          	startRecord()
				        } else { // 第一次进来，未发起授权
					        uni.authorize({
					            scope: 'scope.record',
					            success: () => {//授权成功
					              	uni.showToast({
							        	title: "授权成功",
							        	icon: "success"
							        })
					            }
					        })
				        }
				    },
				    fail: function () {
				        uni.showToast({
				        	title: "鉴权失败，请重试",
				        	icon: "none"
				        })
			      	}
			    })
		    }
		
			function startRecord(){
				me.changedTouches = e.touches[0];
				me.recordStatus = RecordStatus.HOLD;
				RunAnimation = true;
				me.myradom();
		
				let recorderManager = me.recorderManager || uni.getRecorderManager();
				recorderManager.onStart(() => {
					// console.log("开始录音...");
				});
				recorderManager.start({
					format: "mp3"
				});
				// 超时
				setTimeout(function(){
					me.handleRecordingCancel();
					RunAnimation = false
				}, 100000);
			}
		},
		myradom(){
		    const that = this;
		    var _radomheight = that.radomheight;
		    for (var i = 0; i < that.radomheight.length; i++) {
		      //+1是为了避免为0
		     _radomheight[i] = (100 * Math.random().toFixed(2))+10;
		    }
			that.radomheight = _radomheight
		    if (RunAnimation) {
		    	setTimeout(function () {that.myradom(); }, 500);
		    }else{
		    	return
		    }
		},
		handleRecordingMove(e){
			var touches = e.touches[0];
			var changedTouches = this.changedTouches;
			if(!changedTouches){
				return;
			}
		
			if(this.recordStatus == RecordStatus.SWIPE){
				if(changedTouches.pageY - touches.pageY < 20){
					this.recordStatus = RecordStatus.HOLD
				}
			}
			if(this.recordStatus == RecordStatus.HOLD){
				if(changedTouches.pageY - touches.pageY > 20){
					this.recordStatus = RecordStatus.SWIPE
				}
			}
		},
		handleRecordingCancel(){
			RunAnimation = false
			let recorderManager = this.recorderManager;
			// 向上滑动状态停止：取消录音发放
			if(this.recordStatus == RecordStatus.SWIPE){
				this.recordStatus = RecordStatus.RELEASE
			}
			else{
				this.recordStatus = RecordStatus.HIDE;
				this.recordClicked = false;
			}
		
			recorderManager.onStop((res) => {
				console.log('结束录音')
				// console.log("结束录音...", res);
				if(this.recordStatus == RecordStatus.RELEASE){
					console.log("user canceled");
					this.recordStatus = RecordStatus.HIDE
					return;
				}
				if (res.duration < 1000) {
			        wx.showToast({
			        	title: "录音时间太短",
			        	icon: "none"
			        })
			    } else {
			        // 上传
					this.uploadRecord(res.tempFilePath, res.duration);
					console.log('上传')
					this.showrecordbox = false;
			    }
				this.recordStatus = RecordStatus.HIDE;
			});
			// 停止录音
			recorderManager.stop();
			this.showrecordbox = false;
			console.log('停止录音')
		},
		uploadRecord(tempFilePath, dur){
			var str = WebIM.config.appkey.split("#");
			var me = this;
			var token = WebIM.conn.context.accessToken;
			uni.uploadFile({
				url: "https://a1.easemob.com/" + str[0] + "/" + str[1] + "/chatfiles",
				filePath: tempFilePath,
				name: "file",
				header: {
					"Content-Type": "multipart/form-data",
					Authorization: "Bearer " + token
				},
				success(res){
					// 发送 xmpp 消息
					var id = WebIM.conn.getUniqueId();
					var msg = new WebIM.message(msgType.AUDIO, id);
					var dataObj = JSON.parse(res.data);
					// 接收消息对象
					msg.set({
						apiUrl: WebIM.config.apiURL,
						accessToken: token,
						body: {
							type: msgType.AUDIO,
							url: dataObj.uri + "/" + dataObj.entities[0].uuid,
							filetype: "",
							filename: tempFilePath,
							accessToken: token,
							length: Math.ceil(dur / 1000)
						},
						from: me.from,
						to: me.to,
						roomType: false,
						chatType: msgType.chatType.SINGLE_CHAT,
						success: function (argument) {
							disp.fire('em.chat.sendSuccess', id);
						}
					});
					// if(me.isGroupChat()){
					// 	msg.setGroup("groupchat");
					// }
					
					msg.body.length = Math.ceil(dur / 1000);
					
					//console.log('发送的语音消息', msg.body)					 
					let obj = {
						self:true,
						id:msgType.AUDIO+msg.id,
						type:msgType.AUDIO,
						value:getMsgData(msg,msgType.AUDIO),
						body:msg.body.body
					}
					WebIM.conn.send(msg.body);
					console.log(msg)
					// console.log(getMsgData(msg,msgType.IMAGE))
					me.$store.dispatch('pushMsg',obj)
					console.log(me.$store.state.msgList)
				}
			});
		},
		openrecordbox(){
			this.showrecordbox = true;
			this.recordStatus = RecordStatus.SHOW;
		},
		hiderecordbox(){
			this.showrecordbox = false;
			this.recordStatus = RecordStatus.HIDE;
		}
	}
}
</script>

			